<script setup lang="ts">
import type { AppointmentInfoRespVO } from '@/api/appointment-info';
import dayjs from 'dayjs';
import { storeToRefs } from 'pinia';
import { ref } from 'vue';
import { AppointmentInfoApi } from '@/api/appointment-info';
import AuthBar from '@/components/authBar/index.vue';
import Empty from '@/components/empty/index.vue';
import { CHECK_IN_STATUS, checkInStatusList } from '@/enums/checkIn.enums';
import { useRequest } from '@/hooks/useRequest';
import { useUserStore } from '@/store/userStore';
import { dictVal2Text } from '@/utils/dict.utils';
import { isEmpty } from '@/utils/is.utils';
import ClinicSignInPopup from './components/clinicSignInPopup.vue';

const { userInfo } = storeToRefs(useUserStore());

const {
  data: appointmentList,
  runAsync: getAppointmentList
} = useRequest(() => AppointmentInfoApi.getClinicSignInList(userInfo.value.patientId));

const signInPopupRef = ref<typeof ClinicSignInPopup>();
function handleSignIn(item: AppointmentInfoRespVO) {
  signInPopupRef.value?.onOpen(item);
}

function formatSignStatus(item: AppointmentInfoRespVO) {
  const status = Number(item.signInStatus);
  if (status === CHECK_IN_STATUS.PENDING || status === CHECK_IN_STATUS.SIGNED) {
    return dictVal2Text(status, checkInStatusList.list);
  }
  // 判断时间是已过期还是未开始
  if (dayjs().isAfter(dayjs(item.appointmentDate), 'day')) {
    return '已过期';
  }
  return '未开始';
}
</script>

<template>
  <view class="page flex-col">
    <AuthBar />
    <view class="flex-1 overflow-auto pb-40">
      <view class="page-title mt-55">
        就诊签到
      </view>
      <view class="page-subtitle mt-24">
        快速完成门诊签到，提升就诊效率
      </view>
      <view class="page-content mx-53 mt-43 px-45">
        <view class="page-content__title mt-40">
          您的就诊预约
        </view>
        <view class="page-content__list mt-20">
          <view
            v-for="item in appointmentList"
            :key="item.id"
            class="page-content__card p-30"
            :class="[checkInStatusList.getKey(Number(item.signInStatus))]"
            @click="handleSignIn(item)"
          >
            <view>
              <view class="content-card__title">
                {{ item.departmentName }}-{{ item.clinicRoomName }}
              </view>
              <view class="content-card__doctor mt-12">
                {{ item.doctorName }} · {{ item.patientName }}
              </view>
              <view class="content-card__time mt-40">
                {{ dayjs(item.appointmentDate).format("MM月DD日") }} {{ dayjs(item.startTime, 'HH:mm:ss').format("A HH:mm") }}
              </view>
            </view>
            <view>
              <view
                class="content-card__sign"
              >
                {{ formatSignStatus(item) }}
              </view>
              <view
                v-if="Number(item.signInStatus) === CHECK_IN_STATUS.CANNOT_SIGN_IN"
                class="content-card__sign-desc mt-12 text-center"
              >
                不可签到
              </view>
            </view>
          </view>

          <Empty v-if="isEmpty(appointmentList)" />
        </view>

        <view class="card-status my-44">
          <view class="card-status__item mr-40">
            可签到
          </view>
          <view class="card-status__item card-status__item--disabled mr-20">
            未开始（不可签到）
          </view>
          <view class="card-status__item card-status__item--active">
            已签到
          </view>
        </view>
      </view>
    </view>

    <ClinicSignInPopup ref="signInPopupRef" @refresh="getAppointmentList" />
  </view>
</template>

<route type="page" lang="json5">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '分诊报道',
    navigationStyle: 'custom'
  }
}
</route>

<style lang="scss" scoped>
.page {
  height: 100%;
  background: var(--bg-color);

  .page-title {
    color: #3d3d3d;
    font-size: 60px;
    font-weight: bold;

    text-align: center;
  }

  .page-subtitle {
    color: #6f6f6f;
    font-size: 28px;
    text-align: center;
  }

  .page-content {
    box-sizing: border-box;
    border: 2px solid #e6effd;
    background: #d8e7ff;
    border-radius: 20px;
    .page-content__title {
      color: var(--text-color);
      font-size: 48px;
      font-weight: bold;
    }
    .page-content__card {
      @apply flex  justify-between;
      background: #f5f9ff;
      border-radius: 20px;
      margin-bottom: 20px;
      .content-card__title {
        color: var(--text-color);
        font-size: 42px;
        font-weight: bold;
      }
      .content-card__doctor {
        color: #686869;
        font-size: 30px;
      }
      .content-card__time {
        font-size: 24px;
        color: var(--secondary-text-color);
      }
      .content-card__sign {
        background: #dfecff;
        border-radius: 100px;
        color: var(--primary);
        font-size: 32px;
        padding: 12px 36px;
        &.content-card__sign--disabled {
          background: #e8f0fe;
          color: #8b8e93;
        }
      }
      .content-card__sign-desc {
        color: #cb8100;
        font-size: 24px;
      }

      &.CANNOT_SIGN_IN {
        .content-card__sign {
          background: #e8f0fe;
          color: #8b8e93;
        }
      }

      &.SIGNED {
        .content-card__sign {
          background: #ddffe8;
          color: #1c9b00;
        }
      }
    }

    .card-status {
      @apply flex items-center;
      .card-status__item {
        color: var(--primary);
        font-size: 30px;
        position: relative;
        padding-left: 30px;
        &:after {
          position: absolute;
          content: '';
          width: 17px;
          height: 17px;
          background: var(--primary);
          border-radius: 50%;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
        }
        &.card-status__item--disabled {
          color: var(--secondary-text-color);
          &:after {
            background: #777f92;
          }
        }

        &.card-status__item--active {
          color: #1c9b00;
          &:after {
            background: #1c9b00;
          }
        }
      }
    }
  }
}
</style>
